Variable fonts are here. Now what? 可變字型到底好在哪?

可變字型早在 2016 年就出現了,現在所有主流瀏覽器都已經支援它,但很多人還不太清楚它到底有什麼實用價值。這篇文章就從技術優勢、設計最佳化和創意玩法三個方面,告訴大家為什麼要用可變字型,以及怎麼用。
1. 更快、更省、更簡單(技術上的好處)
- 載入速度更快:普通的網頁字型需要一個檔案對應一個字重(比如加粗、細體等),但可變字型只用一個檔案,就能隨意調整字重、字寬等,減少伺服器請求,讓網頁載入更快。
- 管理更簡單:想要改一下標題的字寬?可變字型只需要改一個引數,而不用重新換字型檔案,設計調整更方便。
- 自動適配環境:比如,有些瀏覽器支援讓字型根據螢幕大小自動調整,這樣在不同裝置上看起來都舒服。
- 備用方案更好:如果網頁上的可變字型載入失敗,作業系統自帶的可變字型可以作為備用,讓頁面的文字不會亂掉。
2. 設計更靈活(讓排版更好看)
- 適應不同螢幕大小:普通字型大小是固定的,可變字型可以隨著螢幕大小調整字形,比如手機螢幕小,字型可以變窄一點,讓內容更好排版。
- 讓互動動畫更流暢:比如滑鼠懸停在某個按鈕上時,按鈕的字型可以逐漸加粗,而不是突然變粗,過渡更自然。
- 更適合不同的閱讀環境:黑暗模式、光線感測器、使用者的個性化設定……可變字型都能適配,讓閱讀更舒服。
3. 更有創意(玩出更多花樣)
- 超炫的字型動畫:有些可變字型支援“多路複用”效果,比如滑鼠懸停時,字型的筆畫可以變粗變細,或者字母可以漸變變化,看起來特別酷。
- 做漸變效果:比如一行字的前半部分是細體,後半部分逐漸變粗,這種漸變效果用普通字型很難實現。
- 可變彩色字型:可變字型還能結合彩色字型技術,讓字型顏色和形狀一起變化,做出更炫酷的效果。
- 字型還能“聽”你說話? 可變字型不僅能響應滑鼠和滾動操作,還可以根據聲音、光線、甚至天氣變化調整字型樣式,比如頁面可以根據時間自動調整字重,讓早晨的字型看起來更輕盈,晚上更厚重。